﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Oracle - EDI's Mind</title>
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.signalR-1.0.1.js"></script>
    <script src="Scripts/vivagraph.js"></script>
    <script src="signalr/hubs"></script>
    <script src="Scripts/allPagesDropDown.js"></script>
    <link href="style/oracle.css" rel="stylesheet" />

</head>
<body>
    <select id="root">
        <option value="undefined">Choose root</option>
    </select>

    <div id="controls">

        <img id="avatar" alt="avatar" src="style/avatar.png" title="Oracle avatar" />

        <div id="settings">
            <span>Choose depth 0 - 7</span>
            <input type="range" id="depth" min="0" max ="7" step="1", value="2" />
            <label for="clear">Clear:</label>
            <input type="checkbox" id="clear" value="Clear" checked="checked" />

            <p>Clears the screen every time a new request has been made.</p>
            <label for="fullscreen">Fullscreen</label>
            <input type="checkbox" id="fullscreen" />
            <p>Toggle Fullscreen</p>
            <span>Engine:</span>
            <select id="render">
                <option value="1">SVG</option>
                <option value="2">WebGl</option>
            </select>
            <p>SVG - slower, more info</p>
            <p>WebGl - faster, less info</p>
            <span>Names:</span>
            <select id="names">
                <option value="1000">No names</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30" selected="selected">30</option>
                <option value="50">50</option>
                <option value="80">80</option>
                <option value="100">100</option>
            </select>
            <p>Determines how many links a page should have so that it's name gets shown on the screen.</p>
            <p>*Clear is required for new requests, or the names will not be added.</p>
            <input class="btn" type="button" id="request-btn" value="Reveal" />
            <a href="index.html" class="btn">Home</a>
        </div>

    </div>
    <div id="graph">
        <div id="loading"></div>
    </div>
    <script type='text/javascript'>

        var graph;
        var colors = [
                   "#50f4f2", "#2fa2ac",
                   "#2f72ac", "#2fac96",
                   "#8eb122", "#8046bc",
                   "#e052d8", "#ff9896",
                   "#9467bd", "#c5b0d5",
                   "#8c564b", "#c49c94",
                   "#e377c2", "#f7b6d2",
                   "#7f7f7f", "#c7c7c7",
                   "#bcbd22", "#dbdb8d",
                   "#17becf", "#9edae5"
        ];

        var colorsWGL = [
0x1f77b4ff, 0xaec7e8ff,
0xff7f0eff, 0xffbb78ff,
0x2ca02cff, 0x98df8aff,
0xd62728ff, 0xff9896ff,
0x9467bdff, 0xc5b0d5ff,
0x8c564bff, 0xc49c94ff,
0xe377c2ff, 0xf7b6d2ff,
0x7f7f7fff, 0xc7c7c7ff,
0xbcbd22ff, 0xdbdb8dff,
0x17becfff, 0x9edae5ff
        ];
        var clearCheck = document.getElementById("clear");
        var fullscreenCheck = document.getElementById("fullscreen");
        var control = $.connection.control;
        var names = $("#names");
        var renderSelect = $("#render");
        var startedOracle = false;
        var serverWorking = false;
        $("#loading").hide();

        control.client.graphUpdate = function (data) {
            $("#loading").hide();
            serverWorking = false;
            data = data.split('$');
            var pagesRecieved = data[0].split('|');
            var count = 0;
            if (clearCheck.checked) {
                graph.clear();
            }
            graph.beginUpdate();
            for (var i = 0; i < pagesRecieved.length;) {
                var pageCurrent = { "name": pagesRecieved[i++], "label": pagesRecieved[i++], "group": parseInt(pagesRecieved[i++]) };
                graph.addNode(count++, pageCurrent);

            }
            if (count > 1) {
                var linksRecieved = data[1].split('|');
                for (var i = 0; i < linksRecieved.length;) {
                    var linkCurrent = { "source": parseInt(linksRecieved[i++]), "target": parseInt(linksRecieved[i++]) };
                    graph.addLink(linkCurrent.source, linkCurrent.target);
                }
            }
            graph.endUpdate();
        }

        $.connection.hub.start().done(function () {
            $("#request-btn").click(function () {
                if (!startedOracle) {
                    startedOracle = true;
                    initOracle();
                    $("#render").replaceWith('<span title="Reset page to change engine!">' + (parseInt($("#render").val()) == 1 ? "SVG" : "WebGl") + '<span>');
                }
                if (!serverWorking) {
                    serverWorking = true;
                    $("#loading").show();
                    control.server.reveal($("#root").val(), parseInt($("#depth").val()), parseInt($("#names").val()));
                }
            });
        });

        function initOracle() {
            graph = Viva.Graph.graph()
            //communities = Viva.Graph.community().slpa(graph, 60, 0.30);

            var layout = Viva.Graph.Layout.forceDirected(graph, {
                //springLength: 150,
                springCoeff: 0.00005,
                dragCoeff: 0.03,
                gravity: -7
            });

            var graphics = Viva.Graph.View.webglGraphics();
            graphics
                .node(function (node) {
                    return Viva.Graph.View.webglSquare(12, colorsWGL[node.data.group]);
                })
                .link(function (link) {
                    return Viva.Graph.View.webglLine([-4]);
                });

            var svgGraphics = Viva.Graph.View.svgGraphics();

            svgGraphics.node(function (node) {

                //var groupId = node.communities[0].name % colors.length;
                var groupId = node.data.group;
                var offsetX = node.data.label.length * 5;
                var ui = Viva.Graph.svg('g'),
                    svgText = Viva.Graph.svg('text')
                    .attr('y', '-12px')
                    .attr('x', '-' + offsetX + 'px')
                    .attr('fill', colors[groupId])
                    .text(node.data.label),
                    circle = Viva.Graph.svg('rect')
                .attr('width', 14)
                .attr('height', 14)
                .attr('fill', colors[groupId])

                //circle = Viva.Graph.svg('circle')
                //.attr('r', 7)
                ////.attr('stroke', '#fff')
                ////.attr('stroke-width', '1px')
                //.attr("fill", colors[groupId]);


                circle.append('title').text(node.data.name);
                if (node.data.label !== "") {
                    ui.append(svgText);
                }
                ui.append(circle);
                return ui;

            }).placeNode(function (nodeUI, pos) {
                nodeUI.attr('transform',
                            'translate(' +
                                  (pos.x - 7) + ',' + (pos.y - 7) +
                            ')');
            });

            svgGraphics.link(function (link) {
                return Viva.Graph.svg('line')
                        .attr('stroke', '#ddd')
                        .attr('stroke-width', 1
                        );
            });

            var htmlGra = Viva.Graph.View.webglGraphics

            var renderer = Viva.Graph.View.renderer(graph, {
                container: document.getElementById('graph'),
                layout: layout,
                //graphics: svgGraphics,
                graphics: parseInt($("#render").val()) == 2 ? graphics : svgGraphics,
                //prerender: 0,
                renderLinks: true
            });

            renderer.run();
        }

        function populateDropDownMenu() {
            var x = document.getElementById("root");
            for (var i = 0; i < pagesDropDown.length; i++) {
                var option = document.createElement("option");
                option.text = pagesDropDown[i].substr(0, 120);
                option.value = pagesDropDown[i];
                try {
                    // for IE earlier than version 8
                    x.add(option, x.options[null]);
                }
                catch (e) {
                    x.add(option, null);
                }
            }
        }
        populateDropDownMenu();
    </script>

    <script>


        /* 
        Native FullScreen JavaScript API
        -------------
        Assumes Mozilla naming conventions instead of W3C for now
        */

        (function () {
            var
                fullScreenApi = {
                    supportsFullScreen: false,
                    isFullScreen: function () { return false; },
                    requestFullScreen: function () { },
                    cancelFullScreen: function () { },
                    fullScreenEventName: '',
                    prefix: ''
                },
                browserPrefixes = 'webkit moz o ms khtml'.split(' ');

            // check for native support
            if (typeof document.cancelFullScreen != 'undefined') {
                fullScreenApi.supportsFullScreen = true;
            } else {
                // check for fullscreen support by vendor prefix
                for (var i = 0, il = browserPrefixes.length; i < il; i++) {
                    fullScreenApi.prefix = browserPrefixes[i];

                    if (typeof document[fullScreenApi.prefix + 'CancelFullScreen'] != 'undefined') {
                        fullScreenApi.supportsFullScreen = true;

                        break;
                    }
                }
            }

            // update methods to do something useful
            if (fullScreenApi.supportsFullScreen) {
                fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';

                fullScreenApi.isFullScreen = function () {
                    switch (this.prefix) {
                        case '':
                            return document.fullScreen;
                        case 'webkit':
                            return document.webkitIsFullScreen;
                        default:
                            return document[this.prefix + 'FullScreen'];
                    }
                }
                fullScreenApi.requestFullScreen = function (el) {
                    return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
                }
                fullScreenApi.cancelFullScreen = function (el) {
                    return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
                }
            }

            // jQuery plugin
            if (typeof jQuery != 'undefined') {
                jQuery.fn.requestFullScreen = function () {

                    return this.each(function () {
                        var el = jQuery(this);
                        if (fullScreenApi.supportsFullScreen) {
                            fullScreenApi.requestFullScreen(el);
                        }
                    });
                };
            }

            // export api
            window.fullScreenApi = fullScreenApi;
        })();

    </script>
    <script>


        // do something interesting with fullscreen support
        var fsButton = document.getElementById('request-btn');



        if (window.fullScreenApi.supportsFullScreen) {
            // handle button click
            fsButton.addEventListener('click', function () {
                if (fullscreenCheck.checked) {
                    window.fullScreenApi.requestFullScreen(document.body);
                }
            }, true);
        }

    </script>

</body>
</html>
